<%--
  Created by IntelliJ IDEA.
  User: aa324
  Date: 2023/6/18
  Time: 17:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <title>影票详情</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            align-content: flex-start;
        }
        div.box{
            width: 25%;
            height: 172px;
            display: inline-flex;
            justify-content: center;
            box-sizing: border-box;
            margin: 1rem 0;
        }

        span.context{
            width: 336px;
            height: 172px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border-radius: 0.75rem;
            color: #2c3e50;
            box-shadow: 6px 6px 10px #7f8c8d;
            position: relative;
        }
        h4, p{
            display: inline-block;
            width: 17em;
            line-height: 1.75em;
        }
        #back{
            position: absolute;
            right: 0;
            bottom: 20%;
            width: 5em;
            height: 3em;
            color: #2c3e50;
            background-color: #ecf0f1;
            border-radius: 0.5rem 0 0 0.5rem;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            text-decoration: none;
            box-shadow: 2px 2px 3px black;
            font-weight: bold;
        }
        #back:hover{
            color: white;
            background-color: darkgray;
        }
        .close{
            position: absolute;
            top: 0.5em;
            right: 0.5em;
            color: darkgray;
        }
    </style>
</head>
<body>
    <c:forEach items="${sessionScope.tickets}" var="ticket">
        <div class="box">
            <span class="context">
                <h4>电影名：<c:out value="${ticket.getFilmName()}" /></h4>
                <p>座位号：<c:out value="${ticket.getInfo()}" /></p>
                <p>放映日期：<c:out value="${ticket.getTime()}" /></p>
                <p>电影时长：<c:out value="${ticket.getFilmTime()}" /></p>
                <p>影票号：<c:out value="${ticket.getKid()}" /></p>
                <a href="<c:url value="/removeServlet?stored=del_ticket&id=${ticket.getKid()}&back=/ticketServlet"/>"
                   class="close btn">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">
                        <path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"></path>
                    </svg>
                </a>
            </span>
        </div>
    </c:forEach>
    <a href="${pageContext.request.contextPath}/filmList.jsp" id="back">返回主页</a>
</body>
</html>
